<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理页</title>
    <script src="../js/jquery.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.min.css">

    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/newdetails.css">
    <link rel="shortcut icon" href="../img/ifont.png">
    <link rel="stylesheet" href="../details_iconfont/iconfont.css">
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
    <link rel="stylesheet" href="../css/backstage.css">
</head>

<body>
    <div class="alert alert-warning" role="alert" style=" display: none;">
        网络连接错误！无法获取数据！
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <!-- vue挂载 -->
    <div class="vue container" id="vue">

        <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab"
                    aria-controls="nav-home" aria-selected="true">用户信息</a>
                <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab"
                    aria-controls="nav-profile" aria-selected="false">房源信息</a>
                
            </div>
        </nav>
        <div class="tab-content" id="nav-tabContent">
            <!-- 用户信息 -->
            <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                <div class="userItem">
                    <div class="row">


                        <div class="col-sm-6" v-for="item in userList">
                            <div class="card mb-3" style="max-width: 540px;">
                                <div class="row no-gutters">
                                    <div class="col-md-4">
                                        <img src="../img/head.png" class="card-img" alt="...">
                                    </div>
                                    <div class="col-md-8">
                                        <div class="card-body">
                                            <h4 class="card-title">用户信息</h4>
                                            <p class="card-text">用户名： {{ item.username }}</p>
                                            
                                            <p class="card-text">密&nbsp;&nbsp;&nbsp;码： {{ item.password }}</p>
                                            <p class="card-text"><button @click="modify(item.username)" type="button" class="mr_top btn btn-secondary">修改信息</button></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>



                    </div>
                </div>
            </div>
            <!-- 房源信息 -->
            <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                <div class="userItem">
                    <div class="row">


                        <div class="col-sm-6" v-for="item in houseList">
                            <div class="card mb-3" style="max-width: 540px;">
                                <div class="row no-gutters">
                                    <div class="col-md-4">
                                        <img :src="item.img" class="card-img" alt="..." height="143">
                                    </div>
                                    <div class="col-md-8">
                                        <div class="card-body">
                                            <h4 class="card-title" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;"> {{ item.name }}</h4>
                                            <p class="card-text">{{ item.houseType }}</p>
                                            <p class="card-text">{{ item.totalPrice }}万</p>
                                            <p class="card-text">{{ item.area }}平</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    </div>
    <footer>
        <div id="bottom">
            <div class="bottombx">
                <div class="footer-text">
                    Q房网深圳新房网，为您提供深圳紫园云墅新房，深圳紫园云墅新楼盘信息，包括深圳新开楼盘价格、新楼盘开盘动态、新房房价走势信息等。VR找房、房贷计算器、房价走势等功能，帮您快速找房。查看更多深圳新房请上Q房网房产信息平台。手机版：
                    <a class="link" href="javascript:;">深圳紫园云墅新房
                    </a>
                </div>
                <div class="regard">
                    <p class="regardleft">
                        <a href="javascript:;">关于Q房</a>
                        <a href="javascript:;">人才招聘</a>
                        <a href="javascript:;">联系我们</a>
                        <a href="javascript:;">用户协议</a>
                        <a href="javascript:;">友情链接</a>
                        <a href="javascript:;">网站地图</a>
                        <a href="javascript:;">新上房源</a>
                        <a href="javascript:;">房产知识</a>
                        <a href="javascript:;">房产问答</a>
                        <a href="javascript:;">房产二手房</a>
                        <a href="javascript:;">热门租房</a>
                        <a href="javascript:;">热门新房</a>
                    </p>
                    <p class="regardRight">
                        <img src="../img/bottomtab_03.png" alt="">
                    </p>
                </div>
                <!-- 新房推荐 -->
                <div class="bottomxxka">
                    <p class="btControl">
                        <a href="javascript:;">新房推荐</a>
                    </p>
                    <div class="items  clearfix">
                        <a href="/newhouse/200062304" target="_blank">三正鹏程上花园新房</a>
                        <a href="/newhouse/110000805" target="_blank">融创都会新房</a>
                        <a href="/newhouse/110001318" target="_blank">远洋新干线二期新房</a>
                        <a href="/newhouse/110000798" target="_blank">合正城市广场新房</a>
                        <a href="/newhouse/1102273" target="_blank">奥林华府一期新房</a>
                        <a href="/newhouse/3507069" target="_blank">壹锦园新房</a>
                        <a href="/newhouse/3516113" target="_blank">中海云麓花园新房</a>
                        <a href="/newhouse/1103375" target="_blank">颐安都会中央2期 新房</a>
                        <a href="/newhouse/3516139" target="_blank">御景蓝湾公馆新房</a>
                        <a href="/newhouse/3506597" target="_blank">嘉亿爵悦新房</a>
                        <a href="/newhouse/3512167" target="_blank">星河上寓新房</a>
                        <a href="/newhouse/100000039" target="_blank">佳兆业未来城新房</a>
                        <a href="/newhouse/1102284" target="_blank">鸿威de森林新房</a>
                        <a href="/newhouse/1100739" target="_blank">百合盛世新房</a>
                        <a href="/newhouse/1103684" target="_blank">东都花园新房</a>
                        <a href="/newhouse/1103658" target="_blank">万科广场新房</a>
                        <a href="/newhouse/100000255" target="_blank">琳珠华庭新房</a>
                        <a href="/newhouse/3507988" target="_blank">三正瑞士公馆新房</a>
                        <a href="/newhouse/1103709" target="_blank">海航城新房</a>
                        <a href="/newhouse/3508071" target="_blank">朗泓龙园大观新房</a>
                    </div>
                </div>
                <!-- 检索 -->
                <div class="retrieval">
                    <ul>
                        <li class="botjs">
                            按字母检索：
                            <a href="javascript:;" class="items">A</a>
                            <a href="javascript:;" class="items">B</a>
                            <a href="javascript:;" class="items">C</a>
                            <a href="javascript:;" class="items">D</a>
                            <a href="javascript:;" class="items">E</a>
                            <a href="javascript:;" class="items">F</a>
                            <a href="javascript:;" class="items">G</a>
                            <a href="javascript:;" class="items">H</a>
                            <a href="javascript:;" class="items">I</a>
                            <a href="javascript:;" class="items">J</a>
                            <a href="javascript:;" class="items">K</a>
                            <a href="javascript:;" class="items">L</a>
                            <a href="javascript:;" class="items">M</a>
                            <a href="javascript:;" class="items">N</a>
                            <a href="javascript:;" class="items">O</a>
                            <a href="javascript:;" class="items">P</a>
                            <a href="javascript:;" class="items">Q</a>
                            <a href="javascript:;" class="items">R</a>
                            <a href="javascript:;" class="items">S</a>
                            <a href="javascript:;" class="items">T</a>
                            <a href="javascript:;" class="items">U</a>
                            <a href="javascript:;" class="items">V</a>
                            <a href="javascript:;" class="items">W</a>
                            <a href="javascript:;" class="items">S</a>
                            <a href="javascript:;" class="items">Y</a>
                            <a href="javascript:;" class="items">Z</a>
                        </li>
                        <li class="botbera fl">
                            Copyright。2013~2021 qfang.com All Rights Reserved ICP备案号:粤ICP备05067219号

                        </li>
                        <div class="ebsgovicon" id="ebsgoviconParent">
                            <a href="https://szcert.ebs.org.cn/A62A7CBC-957D-4104-A773-090987C97144" target="_blank">
                                <img src="../img/govIcon.gif" title="深圳市市场监督管理局企业主体身份公示" alt="深圳市市场监督管理局企业主体身份公示"
                                    width="20" height="27.5">
                            </a>
                        </div>
                        <li>
                            公司名称:深圳市云房网络科技有限公司
                        </li>

                    </ul>
                </div>
            </div>
    </footer>
    <!-- <script src="../js/getList.js"></script> -->
    <script>
        var app = new Vue({
            el: '#vue',
            data: {
                userList: [],
                houseList:[]
            },
            mounted() {
                let that = this
                $.get('../../php/getUsers.php', function (data, status) {
                    if (status != 'success') $('.alert').css('display', 'block')
                    that.userList = JSON.parse(data)
                    console.log(that.userList)
                })
                $.get('../../php/getList.php', function (data, status) {
                    if (status != 'success') $('.alert').css('display', 'block')
                    that.houseList = JSON.parse(data)
                    console.log(that.houseList)
                })
            },
            methods: {
                modify(username){
                    localStorage.setItem('userId', username)
                    location.href = "xiugai.html"
                }

            },
        })
    </script>

</body>

</html>